<!--  -->
<template>
<div class='home' >
    <home-header></home-header>
    <div class="navbar">
        <ly-tabs v-model="value" activeColor="#ff4a00" class="ly-tab" @change="changeTab">
            <ly-tab-item v-for="(item,index) in homeListData" :key="index" :name="index" :title="item.name" />
        </ly-tabs>
    </div>
    <div class='home-content' v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="100"
  infinite-scroll-immediate-check="false">
        <div class="listbox flex-sp" v-for="(value,index) in homeContentData" :key="index" @click="goToDetail(value.id)">
            <div class="left">
                <div class="list-text">{{value.title}}</div>
                <div class="flex-sp">
                    <div class="label-text">{{value.class && value.class.name}}</div>
                    <div class="flex">
                        <img src="../../assets/yan.png" alt="">
                        <span>{{value.total_browse}}</span>
                    </div>
                    </div>
                </div>
            <div class="right">
                <img :src="value.pics && value.pics[0] && value.pics[0].url" alt="">
            </div>
        </div>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import homeHeader from './homeHeader'
import { homeContentApi } from '@/api/home'
export default {
//import引入的组件需要注入到对象中才能使用
components: {
    homeHeader,
},
data() {
//这里存放数据
return {
    value:0,
    // items:[
    //     {
    //         label:'精选'
    //     },{
    //         label:'医养'
    //     },{
    //         label:'医保1'
    //     },{
    //         label:'特惠'
    //     },{
    //         label:'太慈社区'
    //     },{
    //         label:'入学'
    //     },{
    //         label:'户口'
    //     },{
    //         label:'周边'
    //     }
    // ]
    page:1,
    class_id:'',
    homeContentData:[]
};
},
//监听属性 类似于data概念
computed: {
    homeListData(){
        return this.$store.state.homeListDatas
    }
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    loadMore() {
        this.page++
        this.homeContentDatas()
    }, 
    changeTab(index){
        this.page = 1
        this.class_id = this.homeListData[index].id
        // console.log(index);
        console.log(this.class_id);
        this.homeContentData = []
        this.homeContentDatas()
    },
    homeContentDatas(){
        homeContentApi({
            class_id:this.class_id,
            page:this.page,
        }).then((res)=>{
           this.homeContentData = this.homeContentData.concat(res.data.data.data)
        })
    },
    goToDetail(data){
        console.log(data);
        this.$router.push({
            name:'detail',
            params:{
                id:data
            }
        })
    },
    scroolPage(){
        let topl = document.documentElement.scrollTop;
        // console.log(topl);
        // if(topl > 1000){
        //     this.page + 1
        // }
    }
},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    console.log(this.page);
},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    this.$store.dispatch('homeListData')
    this.homeContentDatas()
    window.addEventListener('scroll',this.scroolPage)
},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {
    window.removeEventListener('scroll',this.scroolPage)
}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.home{
    .navbar{
        width: 100%;
        .ly-tab{
            height: 4.4rem;

        }
    }
    .home-content{
    width: calc(100% - 3rem);
    margin-left: 1.5rem;
    border-radius: 1rem;
    .listbox{
        height: 10.5rem;
        background: #fff;
        border-radius: .5rem;
        padding: 1.5rem 0.6rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 1rem auto;
        .left{
            width: 60%;
            display: flex;
            flex-direction: column;
            .list-text{
                font-size: 1.5rem;
                margin-bottom: 1.5rem;
            }
            .flex-sp{
                .label-text{
                    width: 5rem;
                    height: 2rem;
                    line-height: 2rem;
                    background: #fff6f2;
                    color: #ff4a00;
                    border-radius: 5rem;
                    text-align: center;
                }
                img{
                    width: 1.5rem;
                    height: 1.5rem;
                    margin-right: .5rem;
                }
            }
        }
        .right{
            width: 11.5rem;
            height: 8.2rem;
            img{
                border-radius: .8rem;
                width: 100%;
                height: 100%;
            }
        }
    }
}
}
</style>